<template>
    <div class="menus">
        <v-row justify="space-around" align="center" style="margin: 10px 2px 15px 2px;">
            <v-col @click="getSubMenu(1)" style="width:60px; padding:0; cursor:pointer;">
                <div style="line-height:18px; font-size:14px;">
                    <v-btn fab size="48" color="#eee" style="margin-bottom:10px;">
                        <v-icon size="39" color="deep-orange">mdi-crane</v-icon>
                    </v-btn><br/>装卸计划
                </div>
            </v-col>
            <v-col @click="getSubMenu(2)" style="width:60px; padding:0; cursor:pointer;">
                <div style="line-height:18px; font-size:14px;">
                    <v-btn fab size="48" color="#eee" style="margin-bottom:10px;">
                        <v-icon size="48" color="blue">mdi-approximately-equal</v-icon>
                    </v-btn><br/>泊位策划
                </div>
            </v-col>
            <v-col @click="getSubMenu(3)" style="width:60px; padding:0; cursor:pointer;">
                <div style="line-height:18px; font-size:14px;">
                    <v-btn fab size="48" color="#eee" style="margin-bottom:10px;">
                        <v-icon size="36" color="blue-grey">mdi-ferry</v-icon>
                    </v-btn><br/>船舶策划
                </div>
            </v-col>
        </v-row>
        <v-row justify="space-around" style="margin: 0 2px;">
            <v-col @click="getSubMenu(4)" style="width:60px; padding:0; cursor:pointer;">
                <div style="line-height:18px; font-size:14px;">
                    <v-btn fab size="48" color="#eee" style="margin-bottom:10px;">
                        <v-icon size="36" color="teal">mdi-domain</v-icon>
                    </v-btn><br/>堆场策划
                </div>
            </v-col>
            <v-col @click="getSubMenu(5)" style="width:60px; padding:0; cursor:pointer;">
               <div style="line-height:18px; font-size:14px;">
                    <v-btn fab size="48" color="#eee" style="margin-bottom:10px;">
                        <v-icon size="36" color="brown">mdi-boom-gate-up</v-icon>
                    </v-btn><br/>闸口管理
                </div>
            </v-col>
            <v-col @click="getSubMenu(6)" style="width:60px; padding:0; cursor:pointer;">
                <div style="line-height:18px; font-size:14px;">
                    <v-btn fab size="48" color="#eee" style="margin-bottom:10px;">
                        <v-icon size="36" color="purple">mdi-webhook</v-icon>
                    </v-btn><br/>EDI中心
                </div>
            </v-col>
        </v-row>
    </div>
</template>

<script>
import SvgIcon from '@jamescoyle/vue-icon';
import { mdiAlphaLBox } from '@mdi/js';


export default ({
    name: "Menus",
    // components: {
    //     SvgIcon
    // },
    // data(){
    //     return {
    //         path: mdiAlphaLBox,
    //     }
    // },
    props: {
        menus: {
            type:Object,
            default: function(){
                return {}
            }
        },
        submenus: {
            type:Array,
            default: function(){
                return []
            }
        }
    },
    methods: {
        getSubMenu(a){
            //定义返回值
            const menus_json = {};
            const submenu_arr = new Array();
            //通过参数a判断数据来源，并更改当前菜单项menus的menu的值:装卸计划/泊位策划/船舶策划/堆场策划/闸口策划/EDI中心，及新的子菜单
            if(parseInt(a)==1){
                //指定父级菜单名
                menus_json.menu="装卸计划";
                //创建新的子菜单
                submenu_arr[0] = {title:"船期表",text:"查看EDI中心分发的船期表数据，检索最近5天的船期资料，并致电船公司确认。"},
                submenu_arr[1] = {title:"导入舱单",text:"将EDI中心分发的舱单数据，导入为计划编制数据，用于装卸作业计划的编制。"},
                submenu_arr[2] = {title:"锚地船舶",text:"通过系统检索，查询本港锚地待作业船舶，了解船舶进港时间及装货物计划。"},
                submenu_arr[3] = {title:"码头船舶",text:"查看当前泊位船舶分布图，查询在港作业的船舶情况，为编制新的船舶作业计划做好准备。"},
                submenu_arr[4] = {title:"编制装卸作业计划",text:"根据已有资料和数据，开始编制船舶装卸作业计划，主要包括：船舶、船位、载重吨，计划装载或卸载的货种、数量，及计划装卸作业时间。"}
            }
            if(parseInt(a)==2){
                //指定父级菜单名
                menus_json.menu = "泊位策划";
                //创建新的子菜单
                submenu_arr[0] = {title:"船期表",text:"查看EDI中心分发的船期表。"},
                submenu_arr[1] = {title:"收箱及出口箱数据",text:"仔细查看收箱及出口箱数据。"},
                submenu_arr[2] = {title:"泊位分布图",text:"检查当前泊位分布图，查看泊位使用情况。"},
                submenu_arr[3] = {title:"装卸桥使用及完好情况",text:"检查（特别是计划使用泊位上的）装卸桥使用及完好情况。"},
                submenu_arr[4] = {title:"编制泊位分配图",text:"根据计划装卸船舶，重新编制泊位分配图。"}                    

            }
            if(parseInt(a)==3){
                //指定父级菜单名
                menus_json.menu = "船舶策划";
                //创建新的子菜单
                submenu_arr[0] = {title:"五日船期表",text:"查看最近五日的船期表，确定待装卸船舶。"},
                submenu_arr[1] = {title:"收箱及出口箱清单",text:"查看待装卸船舶的收箱及出口（或进口）清单，确认出口箱是否已进港。"},
                submenu_arr[2] = {title:"查验海关放行条",text:"逐箱查验出口箱的海关放行条。"},
                submenu_arr[3] = {title:"预配图和船图",text:"查看待装卸船舶的预配图和船图。"},
                submenu_arr[4] = {title:"编制行箱位图",text:"根据收箱及出口箱清单，编制船舶的行箱位图。"}                    

            }
            if(parseInt(a)==4){
                //指定父级菜单名
                menus_json.menu = "堆场策划";
                //创建新的子菜单
                submenu_arr[0] = {title:"船舶收箱",text:"查看船舶进口收箱待处理数据，做好收箱准备。"},
                submenu_arr[1] = {title:"闸口收箱",text:"查看闸口出口收箱待处理数据，做好收箱准备。"},
                submenu_arr[2] = {title:"选择收箱区位",text:"浏览堆场区划，计算空置区位堆存能力，选择收箱的存放区位。"},
                submenu_arr[3] = {title:"场桥使用及完好情况",text:"查看堆场相关区域场桥等设备设施完好情况，做好生产作业准备。"},
                submenu_arr[4] = {title:"收箱给位",text:"按照收箱清单，逐箱为待收箱集装箱给位。"}                    

            }
            if(parseInt(a)==5){
                //指定父级菜单名
                menus_json.menu = "闸口管理";
                //创建新的子菜单
                submenu_arr[0] = {title:"收箱清单",text:"查看待收箱清单。"},
                submenu_arr[1] = {title:"交箱清单",text:"查看待交箱清单。"},
                submenu_arr[2] = {title:"接收《提交箱收发单》",text:"接收拖车司机递交的《提交箱收发单》。"},
                submenu_arr[3] = {title:"审单",text:"严格遵守审单原则，仔细审核《提交箱收发单》。"},
                submenu_arr[4] = {title:"放行",text:"对符合规则的集装箱给与放行。"}                    

            }
            if(parseInt(a)==6){
                //指定父级菜单名
                menus_json.menu = "EDI中心";
                //创建新的子菜单
                submenu_arr[0] = {title:"录入/导入报文数据",text:"录入或批量导入需要发送的保温数据，如船期表、舱单、船图等。"},
                submenu_arr[1] = {title:"发送报文",text:"分别发送船期报文、发送舱单报文、发送提箱清单报文。"},
                submenu_arr[2] = {title:"收阅报文",text:"从收件箱查看已接收到的报文数据。"},
                submenu_arr[3] = {title:"报文数据转换",text:"将已经接收到的报文数据，转换为本系统可识别的数据格式。"},
                submenu_arr[4] = {title:"数据分发",text:"将收到并经过格式转换的报文，分发给泊位策划、船舶策划、堆场策划等用户。"}                    

            }
            // alert("menus_json.menu = " + menus_json.menu)
            // alert("submenu_arr[0].title = "+submenu_arr[0].title)

            //封装为回传到父组件的数据
            const data = {};
            data.menus = menus_json;
            data.submenus = submenu_arr;
            //发送到父级组件（数据包含：menus,submenus）
            this.$emit("onIconMenus",data);
        },
    },
})
</script>

<style scoped>
.cir6 {
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
}

.cir9 {
    border-radius: 9px;
    -moz-border-radius: 9px;
    -webkit-border-radius: 9px;
}
.cir24 {
    border-radius: 24px;
    -moz-border-radius: 24px;
    -webkit-border-radius: 24px;
}
</style>